iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 23
0
Modern Web

走入前端,才從0開始數,初學者歷程系列 第 23

day23-重溫Jquery學習日(四)事件觸發

  • 分享至 

  • xImage
  •  

安安,今日來延續昨天的習題,今天要做以下幾點事情:
1.當點選圓圈的時候會有顏色漸變的效果。
2.將標靶上的數字產生出來。
3.設定一個計分板,加總分數。
4.鍵盤事件,用來歸零分數以及變換標靶模式(讓他移動)。

那就開始嚕!


Start!

1.點選圓圈後漸慢變黑色,利用transition time 再加上模式的一個小技巧,點選放開後就能產生漸變~(可看註解1的程式碼)。

2.將數字產生出來,並且置中,會發現數字重疊,需要設置距離top:20px讓數字分開,要注意attr只有在虛擬元素的content才有用。

:before{
    content: attr(data-label);
    @include ab_center;
    top: 20px;
    }

3.在來到html新增.infos,h1與h3,新增分數說明等等。

.infos
  h1.score Score: 0
  h3.explain 重新開始 R , 變換模式 K

4.在到css地方設置.infos樣式,讓他固定在網頁某個位置,並z-index順序:10。

.infos{
  position: fixed;
  left: 50px;
  bottom: 50px;
  z-index: 10;
  h1,h3{
    margin: 0;
  }
  h1{
    font-size: 50px;
  }
  h3{
    opacity: 0.4;
  }

5.來設置js部分,第一部分先設置分數加總,並設置重置分數的函式。

console.clear()
// 設置分數加總
var score = 0
$("[class^=cir]").click(function(evt){
  var num = $(this).attr("data-label")
  console.log(num)
  score+= parseInt(num*10)
  updateGame()
  $('.score').text("Score:"+score)
})
// 重置分數
function updateGame(){
 $('.score').text("Score:"+score)
}
function resetGame(){
  score = 0
  updateGame()
}

6.鍵盤事件,要把成績歸零及箭靶做移動。

當鍵盤按"r"鍵時會呼叫resetGame函式,並歸零。

當鍵盤按"k"鍵時會產生一個class名叫moving。

// 鍵盤事件,把成績歸零
// 這段是來判斷key
$(window).keydown(function(evt){
  console.log(evt.key)
  if(evt.key=="r"){
    resetGame()
  }
  if(evt.key=="k"){
  $('.target').toggleClass('moving')
  }
})

7.當按鍵盤K時能夠切換模式,要讓標靶做移動,所以回去設置css增加動畫效果。

.target.moving{
  @keyframes moving{
    0%{
      transform: translate(-200px)}
    100%{
      transform: translate(200px)}}
  animation: moving 1s infinite alternate;
}

今日進度的程式碼及效果codepen:https://codepen.io/cinj/pen/bGeGVjX?editors=0101
明天再繼續練習後面的部分~((先來去充實自己


上一篇
day22-重溫Jquery學習日(三)事件觸發
下一篇
day24-重溫Jquery學習日(五)事件觸發完結
系列文
走入前端,才從0開始數,初學者歷程30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言